<script setup>
import SkyCard from "./components/SkyCard.vue";
import SkyLeftChart from "./components/SkyLeftChart.vue";
import SkyRightChart from "./components/SkyRightChart.vue";
import SkyTimeline1 from "./components/SkyTimeline1.vue";
import SkyTimeline2 from "./components/SkyTimeline2.vue";
import Avatar from "@/assets/images/logo/logo.jpg";

const avatar = ref(Avatar);
const show = import.meta.env.VITE_HOME_SHOW;
// Git地址
const handleGitee = () => {
  window.open("", "_blank");
};
// GitHub地址
const handleGitHub = () => {
  window.open("", "_blank");
};
</script>

<template>
  <div v-if="show" class="p-4px">
    <el-card class="rounded-md dark:bg-black" shadow="hover">
      <div class="flex flex-items-center" v-waterMarker="{ text: 'SKY-ADMIN', textColor: '#D9D9D9' }">
        <img class="w-60px h-60px rounded-full select-none user-avatar" :src="avatar" alt="avatar"/>
        <div class="p-l-20px">
          <div class="font-bold p-b-8px whitespace-nowrap">
            <span>SKY-UI-ADMIN🌻</span><span class="c-#409EFF" @click="handleGitee">[Gitee]</span><span>/</span
          ><span class="c-orange" @click="handleGitHub">[GitHub]</span>
          </div>
          <div class="font-bold whitespace-nowrap">今天上班，你摸鱼了吗~🌻</div>
        </div>
      </div>
    </el-card>
    <SkyCard></SkyCard>
    <el-row :gutter="20" class="m-t-5px">
      <!-- 注意：如果不进行操作数组，使用index当key没有问题，若是数组会用来增删改查则不能使用index当key。 -->
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md dark:bg-black" shadow="hover">
          <SkyLeftChart></SkyLeftChart>
        </el-card>
      </el-col>
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md dark:bg-black" shadow="hover">
          <SkyRightChart></SkyRightChart>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="m-t-5px">
      <!-- 注意：如果不进行操作数组，使用index当key没有问题，若是数组会用来增删改查则不能使用index当key。 -->
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md dark:bg-black" shadow="hover">
          <SkyTimeline1></SkyTimeline1>
        </el-card>
      </el-col>
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md dark:bg-black" shadow="hover">
          <SkyTimeline2></SkyTimeline2>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div v-else class="p-4px"></div>
</template>

<style scoped>

</style>
